<template>
  <div>
    <div id="dv01">
      <van-nav-bar title="支付成功" class="dv1" style="padding-top:20px">
        <template #left>
          <van-icon size="20px" name="wap-home-o"/>
        </template>
      </van-nav-bar>
    </div>
    <div style="height: 700px">
      <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <div style="margin-top: 20px;margin-left: 20px;">
          <van-row>
            <van-col span="16">
              <van-grid :border="false" :column-num="3">
                <van-grid-item v-for="(good,index) in goods">
                  <van-image v-if="index < 3" :src="good"/>
                </van-grid-item>
              </van-grid>
            </van-col>
            <van-col span="8" style="margin-top: 20px">
              <van-cell is-link>
                共{{ goods.length }}件
                <template #title style="width: 10%">

                </template>
              </van-cell>
            </van-col>
          </van-row>

        </div>
        <div style="margin-left: 20px;text-align: center">
          <van-steps direction="vertical" :active="active">
            <van-step v-if="status.time.length>0" class="dv2">
              {{status.time }}&nbsp;&nbsp;&nbsp;
              {{ status.msg1 }}
            </van-step>
            <van-step v-if="status.purchasestart.length>0" class="dv2">
              {{ status.purchasestart }}&nbsp;&nbsp;&nbsp;
              {{ status.msg2 }}
            </van-step>
            <van-step v-if="status.purchaseend.length>0" class="dv2">
              {{ status.purchaseend }}&nbsp;&nbsp;&nbsp;
              {{ status.msg3 }}
            </van-step>
            <van-step v-if="status.delivery.length>0" class="dv2">
              {{ status.delivery }}&nbsp;&nbsp;&nbsp;
              {{ status.msg4 }}
            </van-step>
          </van-steps>
        </div>
      </van-pull-refresh>
    </div>

  </div>
</template>

<script>
export default {
  name: "PaySuccess",
  mounted() {
    this.axios.get("/logistics/time.do?name=" + "20220705112556").then(r => {
      if (r.data.code == 200) {
        //成功
        if (r.data.data.ctime.length > 0) {
          console.log(this.$store.state.token)
          this.status.time = r.data.data.ctime;
          this.active = 0
        }
        if (r.data.data.purchasestart.length > 0) {
          this.status.purchasestart = r.data.data.purchasestart;
          this.active = 1
        }
        if (r.data.data.purchaseend.length > 0) {
          this.status.purchaseend = r.data.data.purchaseend;
          this.active = 2
        }
        if (r.data.data.delivery.length > 0) {
          this.status.delivery = r.data.data.delivery;
          this.active = 3
        }

      } else {
        alert("查找失败")
      }
    })
  },
  data() {
    return {
      goods: [
        "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1656781200&t=6bb14b7a7af4f37d7c6d4143e0150c28",
        "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1656781200&t=6bb14b7a7af4f37d7c6d4143e0150c28",
        "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1656781200&t=6bb14b7a7af4f37d7c6d4143e0150c28",
        "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1656781200&t=6bb14b7a7af4f37d7c6d4143e0150c28",
        "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1656781200&t=6bb14b7a7af4f37d7c6d4143e0150c28"
      ],
      status: {
        time: "",
        msg1: "已下单",
        purchasestart: "",
        msg2: "正在采购",
        purchaseend: "",
        msg3: "正在配送",
        delivery: "",
        msg4: "上门"
      },
      time: new Date(),
      active: -2,
      loading: true
    }
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.axios.get("/logistics/time.do?name=" + "20220705112556").then(r => {
          if (r.data.code == 200) {
            //成功
            if (r.data.data.ctime.length > 0) {
              console.log(this.$store.state.token)
              this.status.time = r.data.data.ctime;
              this.active = 0
            }
            if (r.data.data.purchasestart.length > 0) {
              this.status.purchasestart = r.data.data.purchasestart;
              this.active = 1
            }
            if (r.data.data.purchaseend.length > 0) {
              this.status.purchaseend = r.data.data.purchaseend;
              this.active = 2
            }
            if (r.data.data.delivery.length > 0) {
              this.status.delivery = r.data.data.delivery;
              this.active = 3
            }

          } else {
            alert("查找失败")
          }
        })
        this.$toast('刷新成功');
        this.loading = false
      }, 500);

    }
  }
}
</script>

<style scoped>
.dv1 {
  height: 50px;
  background-color: lawngreen;
}

.dv2{
  text-align: left;
  padding-right: 10px;
}

#dv01 /deep/ .van-nav-bar__title {
  color: white;
  font-size: 17px;
}

</style>